<template>
  <div class="content">
    <div class="header">
      <p>
        <span class="m-r-10"> 指标类型 </span>
        <el-select v-model="value" placeholder="请输入或选择" class="m-r-30">
          <el-option value="all">全部 </el-option>
        </el-select>
        <span class="m-r-10"> 所属单位 </span>
        <el-select v-model="value" placeholder="请输入或选择" class="m-r-30">
          <el-option value="all">全部 </el-option>
        </el-select>
        <el-button type="primary" plain>搜索</el-button>
      </p>
      <p>
        <el-button type="primary" plain>保存</el-button>
        <el-button type="primary" plain>下达</el-button>
        <el-button type="primary" plain>导出</el-button>
      </p>
    </div>
    <el-collapse accordion class="collapse">
      <el-collapse-item>
        <template slot="title">
          <el-checkbox v-model="checked">经营实力</el-checkbox>
        </template>
        <el-collapse accordion>
          <el-collapse-item>
            <template slot="title">
              <el-checkbox v-model="checked">一、售电量</el-checkbox>
            </template>
            <el-table :data="tableData" stripe>
              <el-table-column prop="date" label="序号" width="180">
              </el-table-column>
              <el-table-column prop="name" label="单位" width="180">
              </el-table-column>
              <el-table-column prop="address" label="单位"> </el-table-column>
              <el-table-column prop="address" label="2021年计划">
              </el-table-column>
              <el-table-column prop="address" label="下达情况">
              </el-table-column>
              <el-table-column prop="address" label="备注"> </el-table-column>
            </el-table>
          </el-collapse-item>
          <el-collapse-item>
            <template slot="title">
              <el-checkbox v-model="checked">二、利润</el-checkbox>
            </template>
            <el-table :data="tableData" stripe>
              <el-table-column prop="date" label="序号" width="180">
              </el-table-column>
              <el-table-column prop="name" label="单位" width="180">
              </el-table-column>
              <el-table-column prop="address" label="单位"> </el-table-column>
              <el-table-column prop="address" label="2021年计划">
              </el-table-column>
              <el-table-column prop="address" label="下达情况">
              </el-table-column>
              <el-table-column prop="address" label="备注"> </el-table-column>
            </el-table>
          </el-collapse-item>
          <el-collapse-item>
            <template slot="title">
              <el-checkbox v-model="checked">三、资产总额</el-checkbox>
            </template>
            <el-table :data="tableData" stripe>
              <el-table-column prop="date" label="序号" width="180">
              </el-table-column>
              <el-table-column prop="name" label="单位" width="180">
              </el-table-column>
              <el-table-column prop="address" label="单位"> </el-table-column>
              <el-table-column prop="address" label="2021年计划">
              </el-table-column>
              <el-table-column prop="address" label="下达情况">
              </el-table-column>
              <el-table-column prop="address" label="备注"> </el-table-column>
            </el-table>
          </el-collapse-item>
        </el-collapse>
      </el-collapse-item>
      <el-collapse-item>
        <template slot="title">
          <el-checkbox v-model="checked">核心技术</el-checkbox>
        </template>
        核心技术
      </el-collapse-item>
      <el-collapse-item>
        <template slot="title">
          <el-checkbox v-model="checked">服务品质</el-checkbox>
        </template>
        服务品质
      </el-collapse-item>
      <el-collapse-item>
        <template slot="title">
          <el-checkbox v-model="checked">企业治理</el-checkbox>
        </template>
        企业治理
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      checked: "",
      tableData: [
        {
          date: "1",
          name: "国网北京电力公司",
          address: "亿千瓦时",
        },
        {
          date: "2",
          name: "国网北京电力公司",
          address: "亿千瓦时",
        },
        {
          date: "3",
          name: "国网北京电力公司",
          address: "亿千瓦时",
        },
      ],
    };
  },
  mounted() {},
  methods: {},
};
</script>

<style scoped>
.content {
  padding: 30px;
}
.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
.collapse>>>.el-collapse-item__header{
  background-color:#F3F3F3!important;
  padding-left: 10px;
}
</style>
